<template>
  <a-card class="general-card h-full" title="判题状态">
    <template #extra>
      <transition name="alert">
        <div v-if="status === 'submit'">
          <a-alert class="tip-alert" :show-icon="false">正在提交判题</a-alert>
        </div>
        <div v-else-if="status === 'judge'">
          <a-alert class="tip-alert" :show-icon="false" type="warning">
            正在判题中
          </a-alert>
        </div>
        <div v-else-if="status === 'finish'">
          <a-alert class="tip-alert" :show-icon="false" type="success">
            判题完成
          </a-alert>
        </div>
      </transition>
    </template>
    <div class="spin-container">
      <transition name="slide-up">
        <!-- 修改后 -->
        <div v-if="status === 'idle'">点击提交开始判题</div>
        <div v-else-if="status === 'submit'">
          <a-spin dot>
            <template #tip>
              <a-progress style="width: 100px" :percent="progressPercent" />
            </template>
            <template #icon></template>
          </a-spin>
        </div>
        <div v-else-if="status === 'judge'">
          <a-progress
            animation
            :stroke-width="2"
            type="circle"
            :percent="judgePercent"
          />
        </div>
        <div v-else-if="status === 'finish'">
          <a-skeleton
            v-if="submitInfo.judgeInfo === null"
            animation
            :loading="true"
          >
            <a-space
              direction="vertical"
              :style="{ width: '100%' }"
              size="large"
            >
              <a-skeleton-line :rows="3" :widths="[450, 450, 450]" />
            </a-space>
          </a-skeleton>
          <a-space v-else direction="vertical">
            <a-form-item label="执行消息：">
              <a-alert class="alert" type="success" :show-icon="false">
                {{
                  submitInfo.judgeInfo.message === ''
                    ? '无'
                    : submitInfo.judgeInfo.message
                }}
              </a-alert>
            </a-form-item>
            <a-form-item label="消耗内存：">
              <a-alert class="alert" type="normal" :show-icon="false">
                <a-statistic
                  animation
                  :animation-duration="1000"
                  separator="."
                  :value="
                    Number(
                      submitInfo.judgeInfo.memory === null
                        ? 0
                        : submitInfo.judgeInfo.memory
                    )
                  "
                  :value-style="{ fontSize: '1.0em' }"
                  show-group-separator
                />
                mb
              </a-alert>
            </a-form-item>
            <a-form-item label="消耗时间：">
              <a-alert class="alert" type="warning" :show-icon="false">
                <a-statistic
                  animation
                  :animation-duration="1000"
                  separator="."
                  :value="
                    Number(
                      submitInfo.judgeInfo.time === null
                        ? 0
                        : submitInfo.judgeInfo.time
                    )
                  "
                  :value-style="{ fontSize: '1.0em' }"
                  show-group-separator
                />
                ms
              </a-alert>
            </a-form-item>
          </a-space>
        </div>
      </transition>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue';
import { OjProblemSubmitService } from '@/api/gen-api/services/OjProblemSubmitService.ts';
import { ProblemSubmitAddRequest } from '@/api/gen-api';
import type { OjProblemSubmitVo } from '@/api/gen-api/models/problem/OjProblemSubmitVo.ts';

// 修改后
type JudgeStatusType = 'idle' | 'submit' | 'wait' | 'judge' | 'finish'; // 添加idle状态
const status = ref<JudgeStatusType>('idle'); // 明确初始状态
const judgePercent = ref(0);
const props = defineProps({
  flag: {
    type: String,
    default: ''
  },
  req: {
    type: Object as PropType<ProblemSubmitAddRequest>,
    default: null
  }
});

const progressPercent = ref(0);
watch(
  () => props.flag,
  () => {
    status.value = props.flag;
    if (status.value === 'submit') {
      handleSubmit();
      setTimeout(() => {
        progressPercent.value = 0.8;
      }, 500);
    }
  }
);

interface JudgeResult {
  status?: number;
  code_status?: number;
  judgeInfo?: {
    message: string;
    time: number;
    memory: number;
  };
}

const emit = defineEmits(['submitError']);
const problemSubmitId = ref<number>();

/**
 * 提交判题
 */
const handleSubmit = async () => {
  submitInfo.value = {}; // 重置结果
  judgePercent.value = 0;
  OjProblemSubmitService.doQuestionSubmit(props.req.value)
    .then(res => {
      if (res.result) {
        problemSubmitId.value = res.result;
        progressPercent.value = 1;
        setTimeout(() => {
          status.value = 'judge';
          setTimeout(() => {
            judgePercent.value = 0.5;
            setTimeout(() => {
              // setJudgeInterval();
              getJudgeInfo();
              judgePercent.value = 0.8;
            }, 500);
          }, 1000);
        }, 1000);
      }
    })
    .catch(() => {
      emit('submitError');
    });
};
const submitInfo = ref<OjProblemSubmitVo>({});
/**
 * 获取判题信息
 */
// const getJudgeInfo = async () => {
//   OjProblemSubmitService.getInfo(problemSubmitId.value).then(res => {
//     // （0 - 待判题、1 - 判题中、2 - 成功、3 - 失败）
//     if (res.result) {
//       if ([0, 1].includes(res.result.status)) {
//         getJudgeInfo();
//         // TODO: 处理 code_status
//       } else {
//         setTimeout(() => {
//           judgePercent.value = 1;
//           setTimeout(() => {
//             status.value = 'finish';
//             submitInfo.value = res.result;
//           }, 1000);
//         }, 500);
//       }
//     }
//   });
// };
const getJudgeInfo = async () => {
  try {
    const res = await OjProblemSubmitService.getInfo(problemSubmitId.value);
    if (res.result) {
      // 新状态处理逻辑
      status.value = convertStatus(res.result.status, res.result.codeStatus);

      // 修改getJudgeInfo中的访问方式
      if (res.result) {
        submitInfo.value = {
          ...res.result,
          judgeInfo: res.result.judgeInfo ?? {
            // 使用空值合并运算符
            message: getJudgeMessage(res.result.codeStatus ?? 6), // 默认系统错误
            time: 0,
            memory: 0
          }
        };
      }
      return;
    }

    // 继续轮询
    setTimeout(getJudgeInfo, 1000);
  } catch (error) {
    status.value = 'finish';
    submitInfo.value = {
      ...submitInfo.value,
      judgeInfo: {
        message: '获取判题结果失败',
        time: 0,
        memory: 0
      }
    };
  }
};
const convertStatus = (
  backendStatus: number,
  codeStatus?: number
): JudgeStatusType => {
  const map: Record<number, JudgeStatusType> = {
    0: 'submit', // 提交中
    1: 'wait', // 等待中
    2: 'judge', // 判题中
    3: codeStatus === 0 ? 'finish' : 'finish', // 成功/失败都用finish，通过code_status区分
    4: 'finish' // 失败
  };
  return map[backendStatus] || 'idle'; // 默认返回idle
};

const createDefaultJudgeInfo = (codeStatus: number) => ({
  message: getJudgeMessage(codeStatus),
  time: 0,
  memory: 0
});

// 判题结果消息映射
const getJudgeMessage = (codeStatus: number) => {
  const messages = {
    0: '执行成功',
    1: '答案错误',
    2: '代码编译失败',
    3: '运行时异常',
    4: '运行超时',
    5: '内存超出限制',
    6: '系统内部错误'
  };
  return messages[codeStatus] || '未知错误';
};

let pollingTimer: NodeJS.Timeout;

// const startPolling = () => {
//   clearTimeout(pollingTimer); // 清除旧定时器
//
//   const poll = async () => {
//     const res = await OjProblemSubmitService.getInfo(problemSubmitId.value);
//     if (res.result) {
//       // 严格状态判断
//       if (res.result.status === 3 && res.result.code_status === 0) {
//         // 明确成功
//         status.value = 'finish';
//         submitInfo.value = res.result;
//         return;
//       }
//
//       // 其他状态处理
//       status.value = convertStatus(res.result.status);
//
//       // 继续轮询条件：状态为进行中且未超时
//       if (res.result.status <= 2 && !isTimeout(30)) {
//         // 30秒超时
//         pollingTimer = setTimeout(poll, 1000);
//       } else {
//         handleTimeout();
//       }
//     }
//   };
//
//   poll();
// };

// const isTimeout = (seconds: number) => {
//   return Date.now() - submitStartTime > seconds * 1000;
// };
// 5. 轮询逻辑
const startPolling = () => {
  const poll = async () => {
    const res = await OjProblemSubmitService.getInfo(problemSubmitId.value);
    if (res.result) {
      status.value = convertStatus(res.result.status, res.result.code_status);

      if (['finish', 'idle'].includes(status.value)) {
        submitInfo.value = {
          ...res.result,
          judgeInfo:
            res.result.judgeInfo ??
            createDefaultJudgeInfo(res.result.codeStatus ?? 6)
        };
        return;
      }

      setTimeout(poll, 1000);
    }
  };
  poll();
};

const handleTimeout = () => {
  status.value = 'finish';
  submitInfo.value = {
    ...submitInfo.value,
    judgeInfo: {
      message: '判题超时，请检查后台服务',
      time: 0,
      memory: 0
    }
  };
};
</script>

<style scoped lang="less">
.alert {
  width: 450px;
}

.tip-alert {
  border-radius: 10px;
}

:deep(.arco-card-body) {
  height: 70%;
}

.spin-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.2s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.alert-enter-active,
.alert-leave-active {
  transition: all 0.25s ease-out;
}

.alert-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.alert-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>
